<template>
	<view>
		<view class="order-c">
			<view class="title">
				等待支付
			</view>
			<view class="address" @tap="goAddress" v-if="flag">
				去选择收货地址
			</view>
			<view class="address-info" @tap="goAddress" v-else>
				<view >姓名：{{addressInfo.name}} 电话号码：{{addressInfo.phoneNumber}}</view>
				<view >收货地址：{{addressInfo.province}}-{{addressInfo.city}}-{{addressInfo.region}} {{addressInfo.detailAddress}}</view>
			</view>
			<view class="order-card">
				<view class="order-title">
					<text>订单编号{{orderId}}</text>
					<text>等待支付</text>
				</view>
				<view class="goods-item" v-for="item in orderInfo" :key="item.id">
					<image :src="item.productPic" mode=""></image>
					<view class="goods-info">
						<view class="fir">
							<view >
									<text>{{item.productName}}</text>
							</view>
						<view >
							<text>￥{{item.productPrice}}元</text>
						</view>
							
						</view>
						<view class="sec">
							<view >编号{{item.productSkuId}}</view>
							<view >x{{item.productQuantity}}</view>
						</view>
						<view class="thr">
							规格: <view v-for="(item1,index) in  JSON.parse(item.productAttr)" :key="index"> <view>{{item1.key}}:{{item1.value}}</view></view>
						</view>
					</view>
				</view>
				
					<view class="total">
						合计：{{total}}元
					</view>
					<view class="bottom">
						<view class="btns" @tap="pay">
							确认付款
						</view>
					</view>
					
				
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import {order,getOrderId,confirm} from "../../../utils/goodsInfo/addCar/order/index.js"
	
	export default {
		data() {
			return {
				
				orderId:'',
				orderInfo:[],
				total:'',
				addressInfo:{},
				flag:true,
				addressId:''
			};
		},
		onLoad(options) {
			this.orderId=options.id
			console.log(this.orderId)
			getOrderId(this.orderId).then(res=>{
				console.log(res.data.orderItems)
				this.orderInfo=res.data.orderItems
				var sum = 0;
				this.orderInfo.forEach(el=>{
				sum+= el.totalPrice	 
				
				})
				this.total=sum
			})
			
			
			
		},
		methods:{
			goAddress(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
				
			},
			pay(){
				confirm({
				"addressId": this.addressId,
				"orderId": this.orderId,
				"orderItemList": this.orderInfo,
				"payType": 0,
				"sourceType": 0
		}).then(res=>{
			console.log(res)
			if(res.success){
				uni.setStorageSync("oderList",res.data)
				uni.navigateTo({
					url:'/pages/cart/order/paybefore/paybefore'
				})
			}
		})
			}
		},
		onShow() {
			this.addressInfo=uni.getStorageSync("address")
			console.log(this.addressInfo)
			this.addressId=this.addressInfo.id
			if(uni.getStorageSync("address")){
				this.flag=false
			}else{
				this.flag=true
			}
		},
		computed:{
			
		}
	}
</script>

<style lang="scss" scoped>
.order-c{
	width: 90%;
	margin: 0 auto;
	
	.title{
		font-size: 36rpx;
	    color: #494949;
	    height: 88rpx;
	    border-bottom: 2rpx solid #ccc;
	    line-height: 88rpx;
	    margin: 0 60rpx;
	    box-sizing: border-box;	
	}	
	.address-info{
			font-size: 28rpx;
		    color: #494949;
		    border-bottom: 2rpx solid #ccc;
		    margin: 0 60rpx;
		    box-sizing: border-box;
		    padding: 30rpx 0
	}
	.address{
			font-size: 28rpx;
		    color: #494949;
		    border-bottom: 2rpx solid #ccc;
		    margin: 0 60rpx;
		    box-sizing: border-box;
		    padding: 30rpx 0;
		}
		.order-card{
				width: 672rpx;
			    box-sizing: border-box;
			    padding: 36rpx;
			    border-radius: 24rpx;
			    background-color: #fff;
			    margin: 30rpx auto;
			    font-size: 24rpx;
			    color: #3e3e3e;
				.total{
					text-align: right;
				}
				.bottom{
					width: 100%;
					display: flex;
					justify-content: flex-end;
				}
				.btns{
						width: 124rpx;
					    height: 50rpx;
					    border: 2rpx solid #2d4f43;
					    font-size: 26rpx;
					    border-radius: 10rpx;
					    color: #2d4f43;
					    text-align: center;
					    line-height: 50rpx;
					    margin-left: 32rpx;
						
						
				}
				.order-title{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.goods-item{
					display: flex;
					justify-content: flex-start;
					border-bottom: 2rpx solid #f1ece7;
					 padding: 30rpx 0;
					 image{
						width: 81px;
						height: 81px;
						flex-shrink: 0;
						background-color: #8f8f94;
					 }
				}
				.goods-info{
					width: 470rpx;
					margin-left: 28rpx;
					.fir{
						font-size: 26rpx;
						 line-height: 74rpx;
						 color: #3e3e3e;
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
					}
					.sec{
						justify-content: space-between;
					}
					.sec,.thr{
							font-size: 22rpx;
						    color: #8d8d8d;
						    line-height: 30rpx;
						    margin-top: 4rpx;
							display: flex;
							
							align-items: center;
					}
				}
		}
		
}
</style>
